<template>
  <div class="refund">
    <el-card shadow="never">
      <el-form label-width="80px" :inline="true">
        <el-form-item label="申请日期:">
          <el-date-picker v-model="getTime" style="width: 220px;" size="mini" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="handleDateChange" popper-class="form-data-ccc" />
        </el-form-item>
        <el-form-item label="交易账号:">
          <el-input v-model="formQuery.accountNumber" size="mini" />
        </el-form-item>
      </el-form>
      <el-form label-width="80px" :inline="true">
        <el-form-item label="挑战项目:">
          <el-select v-model="formQuery.challengeProject" size="mini">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in challenges" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="账户模式:">-->
        <!--          <el-select v-model="formQuery.accountPattern" size="mini">-->
        <!--            <el-option-->
        <!--                v-for="item in Account"-->
        <!--                :key="item.id"-->
        <!--                :label="item.name"-->
        <!--                :value="item.id"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="申请人">
          <el-input v-model="formQuery.applicant" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="subimit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <el-table border :data="tableData" style="width: 100%">

        <!--        <el-table-column-->
        <!--          prop="accountType"-->
        <!--          align="center"-->
        <!--          label="账号类型"-->
        <!--        />-->
        <el-table-column prop="challengeProject" align="center" label="挑战项目">
          <template v-slot="{ row }">
            <span v-if="row.challengeProject === '0'">评估</span>
            <span v-if="row.challengeProject === '1'">即时</span>
            <span v-if="row.challengeProject === '2'">固定</span>
            <span v-if="row.challengeProject === '3'">比赛</span>
            <span v-if="row.challengeProject === '4'">股票</span>
            <span v-if="row.challengeProject === '5'">免费评估</span>
          </template>
        </el-table-column>
        <el-table-column prop="expansionPlan" align="center" label="扩展计划">
          <template v-slot="{ row }">
            <span v-if="row.expansionPlan === 0">Level 0</span>
            <span v-if="row.expansionPlan === 1">Level 1</span>
            <span v-if="row.expansionPlan === 2">Level 2</span>
            <span v-if="row.expansionPlan === 3">Level 3</span>
            <span v-if="row.expansionPlan === 4">Level 4</span>
            <span v-if="row.expansionPlan === 5">Level 5</span>
            <span v-if="row.expansionPlan === 6">Level 6</span>
            <span v-if="row.expansionPlan === 7">Level 7</span>
            <span v-if="row.expansionPlan === 8">Level 8</span>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--            prop="accountPattern"-->
        <!--            align="center"-->
        <!--            label="账号模式"-->
        <!--        >-->
        <!--          <template v-slot="{row}">-->
        <!--            <div v-for="item in Account" :key="item.id">-->
        <!--              <span v-if="row.accountPattern === item.id">{{ item.name }}</span>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="accountNumber" width="160px" align="center" label="交易账号" />
        <el-table-column prop="profitName" align="center" label="申请人" />
        <el-table-column prop="emails" align="center" label="邮箱" width="180" />
        <el-table-column prop="withdrawalPaidAmount" align="center" label="盈利金额" />
        <el-table-column prop="profitMethod" align="center" label="提现方式">
          <template v-slot="{ row }">
            <div v-for="item in arrPayment" :key="item.id">
              <span v-if="row.profitMethod === item.id">{{ item.name }}</span>
            </div>
          </template>

        </el-table-column>
        <el-table-column prop="profitTime" align="center" width="160px" label="申请日期" />
        <el-table-column prop="verifyType" align="center" width="160px" label="客服操作">
          <template v-slot="{ row }">
            <el-button type="text" v-if="row.verifyType === 1" @click="verifyTypeDialog(row.id)">未处理</el-button>
            <span v-if="row.verifyType === 2">同意</span>
            <span v-if="row.verifyType === 3">驳回</span>
          </template>
        </el-table-column>
        <el-table-column prop="verifyName" align="center" width="100px" label="客服操作人" />
        <el-table-column prop="verifyTime" align="center" width="160px" label="审核时间" />
        <el-table-column align="center" width="140" label="财务操作">
          <!-- 处理的结果: 0未处理1已经处理  2已经拒绝 -->
          <template v-slot="{ row }">
            <el-button v-if="row.profitResult === 1" type="text" @click="delBtn(row)">未处理</el-button>
            <span v-if="row.profitResult === 2">同意</span>
            <span v-if="row.profitResult === 3">驳回</span>
            <!-- <el-button v-if="false" type="text" @click="yiBtn">已处理</el-button> -->
            <!-- <el-button v-if="false" type="text" @click="jujBtn">已拒绝</el-button> -->
            <!-- <el-button type="text" @click="editBtn">编辑</el-button> -->
          </template>
        </el-table-column>
        <el-table-column prop="handlerName" align="center" width="100px" label="财务操作人" />
        <el-table-column prop="financeTime" align="center" width="120px" label="财务操作时间" />
        <el-table-column prop="profitRemark" align="center" label="备注" />
      </el-table>
      <paging :page-size="formQuery.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <!-- 提现方式,1银行卡2加密货币3stripe -->
    </el-card>
    <addRefundList ref="addRefundList" :dialog-row="dialogRow" :dialog-visible.sync="dialogVisible"
      @refresh="getProfitList" />
    <el-dialog title="客服操作" :visible.sync="dialogVerifyTypeFormVisible" width="30%">
      <el-form :model="VerifyTypeForm">
        <el-form-item label="客服操作" label-width="100px">
          <el-select v-model="VerifyTypeForm.verifyType" placeholder="请选择客服核实的阶段" size="mini">
            <el-option label="同意" value="2"></el-option>
            <el-option label="驳回" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="100px" v-if="VerifyTypeForm.verifyType === '3'">
          <el-input v-model="VerifyTypeForm.profitRemark" placeholder="请输入备注" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVerifyTypeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnVerifyType">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import paging from '@/components/paging.vue'
import addRefundList from './components/addRefundList'
import { Account, PhaseList1, arrPayment, challenges, modifyTimeToEndOfDay } from '@/utils'
import { getProfitList1, submitCustomer } from '@/api/Profit'
import { getAccountType } from '@/api/Tradingacct'

export default {
  name: 'VueAdminRefundList',
  components: {
    addRefundList,
    paging
  },
  data() {
    return {
      dialogVisible: false,
      dialogRow: {},
      dialogVerifyTypeFormVisible: false, // 客服操作弹出框
      VerifyTypeForm: {
        id: null, // id
        verifyType: null, // 客服核实的阶段
        profitRemark: null // 备注
      },
      tableData: [
        {
          accountStage: 0,
          accountPattern: 0
        }
      ],
      total: 0,
      AccountType: [],
      getTime: null,
      formQuery: {
        accountNumber: null,
        accountPattern: null,
        challengeProject: null,
        beginTime: null,
        endTime: null,
        page: 1,
        applicant: null,
        pageSize: 10
      }
    }
  },
  computed: {
    Account() {
      return Account
    },
    PhaseList1() {
      return PhaseList1
    },
    arrPayment() {
      return arrPayment
    },
    challenges() {
      return challenges
    }
  },

  mounted() {
    this.getuseACCouyt()
    this.getProfitList()
  },

  methods: {
    handleDateChange() {
      if (this.getTime !== null) {
        this.getTime[1] = modifyTimeToEndOfDay(this.getTime[1])
        this.formQuery.beginTime = this.getTime[0]
        this.formQuery.endTime = this.getTime[1]
      } else {
        this.formQuery.beginTime = ''
        this.formQuery.endTime = ''
      }
    },
    // 账号类型
    async getuseACCouyt() {
      const data = await getAccountType()
      this.AccountType = data
    },
    // 列表
    async getProfitList() {
      const data = await getProfitList1(this.formQuery)

      this.tableData = data.records
      this.total = data.total
    },
    // 查询
    subimit() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.formQuery.page = 1
        this.getProfitList()
      }, 100)
    },
    // 编辑
    editBtn() {

    },
    // 未处理
    delBtn(arr) {
      console.log(arr, 'row')
      this.dialogRow = { ...arr }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.addRefundList.getWithdrawInfo(arr)
      })
    },
    // // 一处理
    // yiBtn() {

    // },
    // // 已拒绝
    // jujBtn() {

    // },
    // 后期要改
    handleSizeChange(val) {
      this.formQuery.pageSize = val
      this.getRefundListArr()
    },
    handleCurrentChange(val) {
      this.formQuery.page = val
      this.getRefundListArr()
    },

    verifyTypeDialog(id) {
      this.VerifyTypeForm.id = id
      this.dialogVerifyTypeFormVisible = true
    },

    async btnVerifyType() {
      const res = await submitCustomer(this.VerifyTypeForm)
      this.dialogVerifyTypeFormVisible = false
      await this.getProfitList()
      this.$message.success(res.paymentResult)
    }
  }
}
</script>

<style lang="scss" scoped>
@media (max-width:768px) {

  .el-form-item {
    display: flex;


  }
}
</style>
